<template>
  <div>
    <BookInfo :info='info'></BookInfo>
    <CommentList :comments='comments'></CommentList>
    <div class="comment"
         v-if='showAddComment'>
      <textarea class='textarea'
                v-model='comment'
                placeholder="请输入图书短评"></textarea>

      <div class='location'>
        地理位置：
        <switch color='#ea5149'
                @change='getLocation'>{{location}}</switch>
      </div>
      <div class='phone'>
        手机型号：
        <switch color='#ea5149'
                @change='getPhone'>{{phone}}</switch>
      </div>
      <button class='btn'
              @click='commentHandle'>评论</button>
    </div>
    <button open-type='share'
            class='btn'>分享</button>
  </div>
</template>

<script>
import { get, post, showModal } from '@/utils'
import BookInfo from '@/components/BookInfo'
import CommentList from '@/components/CommentList'
export default {
  data () {
    return {
      comments: [],
      userInfo: {},
      bookid: '',
      info: {},
      phone: '',
      location: '',
      comment: ''
    }
  },
  computed: {
    showAddComment () { // 未登录或已评论则不显示评论区域
      if (!this.userInfo.openId) {
        return false
      }
      if (this.comments.filter(v => v.openid === this.userInfo.openId).length) {
        return false
      }
      return true
    }
  },
  methods: {
    async getComment () {
      const commentList = await get('/weapp/commentList', {
        bookid: this.bookid
      }) // 从数据库获取评论列表
      this.comments = commentList.list || []
    },
    async getDetail () {
      const info = await get('/weapp/bookDetail', {
        id: this.bookid
      })
      wx.setNavigationBarTitle({
        title: info.title
      })
      this.info = info
    },
    getLocation (e) { // 获取地理位置
      const ak = 'pe0wfbWiwbaSdVOiIEnjsOGYQzYwcGbx'
      let url = 'http://api.map.baidu.com/geocoder/v2/'
      if (e.target.value) {
        wx.getLocation({
          success: (res) => {
            wx.request({
              url,
              data: {
                ak,
                location: `${res.latitude},${res.longitude}`,
                output: 'json'
              },
              success: (res) => {
                if (res.data.status === 0) {
                  this.location = res.data.result.addressComponent.city
                } else {
                  this.location = '未知地点'
                }
              }
            })
          }
        })
      } else {
        this.location = ''
      }
    },
    getPhone (e) { // 获取手机型号
      this.phone = e.target.value ? wx.getSystemInfoSync().model : ''
    },
    async commentHandle () {
      if (!this.comments) {
        return
      }
      const data = {
        openid: this.userInfo.openId,
        bookid: this.bookid,
        comment: this.comment,
        phone: this.phone,
        location: this.location
      }
      try {
        await post('/weapp/addComment', data) // 将评论存入到数据库
        this.comment = ''
        this.getComment()
      } catch (e) {
        showModal('评论失败', e.msg)
      }
    }
  },
  mounted () {
    this.bookid = this.$root.$mp.query.id
    this.userInfo = wx.getStorageSync('userInfo') // 获取storage中的openid
    this.getComment()
    this.getDetail()
  },
  components: {
    BookInfo,
    CommentList
  }
}
</script>

<style lang='scss'>
.comment {
  .textarea {
    background: #eee;
    width: 730rpx;
    height: 200rpx;
    padding: 10rpx;
  }
}
</style>
